<%@ include file="includes/head.jsp" %> 
<!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>  -->
		
		<!-- Add mousewheel plugin (this is optional) -->
		<script type="text/javascript" src="js/lib/jquery.mousewheel-3.0.6.pack.js"></script>
	
		<!-- Add fancyBox main JS and CSS files -->
		<script type="text/javascript" src="js/source/jquery.fancybox.js"></script>
		<link rel="stylesheet" type="text/css" href="js/source/jquery.fancybox.css" media="screen" />
	
		<!-- Add Button helper (this is optional) -->
		<link rel="stylesheet" type="text/css" href="js/source/helpers/jquery.fancybox-buttons.css" />
		<script type="text/javascript" src="js/source/helpers/jquery.fancybox-buttons.js"></script>
	
		<!-- Add Thumbnail helper (this is optional) -->
		<link rel="stylesheet" type="text/css" href="js/source/helpers/jquery.fancybox-thumbs.css" />
		<script type="text/javascript" src="js/source/helpers/jquery.fancybox-thumbs.js"></script>
	
		<!-- Add Media helper (this is optional) -->
		<script type="text/javascript" src="js/source/helpers/jquery.fancybox-media.js"></script>
		
		<script type="text/javascript" src="js/jquery.media.js"></script>
		
		<h1>Acuse de recibo</h1>

		<form action="ficheros" method="post" enctype="multipart/form-data">
			<p>
				<label>Campo 1</label>
				<input type="text" name="campo1" placeholder="campo1" />
			</p>
			<p>
				<label>Campo 2</label>
				<input type="text" name="campo2" placeholder="campo2" />
			</p>
			<p>
				<label>Campo 3</label>
				<input type="text" name="campo3" placeholder="campo3" value="" />
			</p>
			<p>
				<label>Campo 4</label>
				<input type="text" name="campo4" placeholder="campo4" />
			</p>
			<p>
				<label>Fichero</label><input type="file" name="fichero" id="fichero" />
			</p>
			<p><input type="submit" name="enviar" value="enviar" /></p>
		</form>
		<div>
			<input type="button" id="prev" value="Preview" />
			<span id="media" href="<%=request.getAttribute("urlFichero") %>#toolbars=no">sds<span>  
			<a href="<%=request.getAttribute("urlFichero") %>" id="fancy" >Open file</a>
			
			<a href="#openModal">Open Modal</a>
		</div>
			<div id="openModal" class="modalDialog">
			div>
			<a href="#close" title="Close" class="close">X</a>
			<h2>Modal Box</h2>
			<p>This is a sample modal box that can be created using the powers of CSS3.</p>
			<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
			</div>
	</div>
	<!-- http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/ -->
		 <script>		
			$(document).ready(function () {
				$modal = $('#modal');
				$content = $('#content');
				$('#prev').click(function(){
					//alert('hola');$modal.html();
					$modal.removeClass('modal_invisible').addClass('modal_visible');
					$('body').addClass('dark');
				});
				
				/*$("#fancy").fancybox({
					'width'				: '75%',
					'height'			: '75%',
					'autoScale'			: false,
					'transitionIn'		: 'none',
					'transitionOut' 	: 'none',
					'type' 				: 'iframe'
				});
				$("#media").click(function(){
					//return false;
				})
				$("#prev").click(function(){
					
					$("#media").media();
				})*/
		    });
		</script> 
	<%@ include file="includes/footer.jsp" %> 